import React, { Component } from "react";
import { connect } from "react-redux";
import "./DepositItemDetails.scss";
import yhTools from "../../../tools/yh";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { channelCode } from "../../../config/Config";
import { Toast } from "antd-mobile";
import iconNext from "@images/imageXHB/icon-next-arrow.png";

class DepositItemDetails extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loadStatus: "1", // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
			selectIndex: -1,
			pageParams: this.props.match.params,
			orderInfos: {
				holdOrderAmt: "0.00",
				tradeNumber: 0.0,
				advanceRate: 0.0,
				holdDays: 0,
				holdProfit: 0.0,
				incomeBeginDate: "--",
				incomeEndDate: "--",
				rate: 0.0,
				redeemProfit: 0.0,
				sumProfit: "0.00",
				term: "0",
				termUnit: "0"
			},
			modal1: false
		};
	}

	componentDidMount() {
		console.log(this.props.match.params);
		this.getInitData();
	}

	getInitData = () => {
		let objs = {
			url: "/fm/financeOrderDetails",
			params: {
				channelCode: channelCode,
				tradeNumber: this.state.pageParams.tradeNumber,
				type: "2",
				pageIndex: "1",
				pageSize: "10"
			}
		};
		// Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				this.setState({
					orderInfos: res.data || {},
					loadStatus: "1"
				});
			} else {
				Toast.info(res.message, 2);
				this.setState({
					loadStatus: "2"
				});
			}
		});
	};

	isInteger = amt => {
		let value = Number(amt).toFixed(2);
		return value;
	};
	render() {
		const headerParams = {
			header: {
				title: "存单详情"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		let { orderInfos } = this.state;
		return (
			<MainLayout pageParams={headerParams}>
				<div className="deposit-item-detail-page">
					<div className="line-1">
						<div className="deposit-topa">
							<div className="deposit-topa-left">
								<p className="deposit-topa-left-top">
									{this.isInteger(orderInfos.holdOrderAmt)}
								</p>
								<p className="deposit-topa-left-bottom">持有金额(元）</p>
							</div>
							<div
								className="deposit-topa-right"
								onClick={this.gotoPage.bind(this, 1)}
							>
								<div className="deposit-topa-right-left">
									<p className="deposit-topa-right-left-top">
										+{orderInfos.sumProfit}
									</p>
									<p className="deposit-topa-right-left-bottom">
										累计收益(元）
									</p>
								</div>
								<img src={iconNext} alt="" />
							</div>
						</div>
					</div>
					<div className="line-2">
						<div className="item">
							<div className="item-left">产品编号</div>
							<div className="item-right">{orderInfos.productId}</div>
						</div>
						<div className="item">
							<div className="item-left">提前支取利率</div>
							<div className="item-right">
								{Number(orderInfos.advanceRate).toFixed(2)}%
							</div>
						</div>
						<div className="item">
							<div className="item-left">存款利率</div>
							<div className="item-right">
								{Number(orderInfos.rate).toFixed(2)}%
							</div>
						</div>
						<div className="item">
							<div className="item-left">合并后存单</div>
							<div className="item-right">
								{orderInfos.comments == "MERGE" ? "是" : "否"}
							</div>
						</div>
						<div className="item">
							<div className="item-left">存入日</div>
							<div className="item-right">{orderInfos.incomeBeginDate}</div>
						</div>
						{this.state.pageParams.productDetail === "B" && (
							<div className="item">
								<div className="item-left">产品期限</div>
								<div className="item-right">
									{orderInfos.term}
									{this.getText(orderInfos.termUnit)}
								</div>
							</div>
						)}

						{this.state.pageParams.productDetail === "A" && (
							<div className="item">
								<div className="item-left">观察期截止日</div>
								<div className="item-right">{orderInfos.lookStopTime}</div>
							</div>
						)}
						{this.state.pageParams.productDetail === "B" && (
							<div className="item">
								<div className="item-left">到期日</div>
								<div className="item-right">{orderInfos.incomeEndDate}</div>
							</div>
						)}
					</div>
					<div
						className="btn-common"
						style={
							this.state.pageParams.lock === "0"
								? {}
								: { background: "#cbcbcb" }
						}
						onClick={this.gotoPage.bind(this, 2)}
					>
						转出
					</div>
				</div>
			</MainLayout>
		);
	}

	gotoPage = i => {
		let url = "";
		if (i === 1) {
			url = `/incomeDetail/${this.state.pageParams.tradeNumber}/${this.state.pageParams.productDetail}`;
		} else if (this.state.pageParams.lock === "0") {
			url = `/transferXHBOut/${this.state.pageParams.tradeNumber}`;
		} else {
			Toast.info("观察期内，暂不支持转出", 2);
			return;
		}
		this.props.history.push({
			pathname: url
		});
	};
	getText(key) {
		let obj = {
			1: "日",
			2: "月",
			3: "年"
		};
		return obj[key];
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const DepositItemDetailsPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(DepositItemDetails);
export default DepositItemDetailsPage;
